stylelint

What is stylelint?

Stylelint is a powerful, modern linter that helps you avoid errors and enforce consistent conventions in your stylesheets. It is configurable and supports the latest CSS syntax as well as CSS-like syntaxes, such as SCSS.

What are stylelint's main functionalities?

Linting CSS files

This command will lint all CSS files in the 'src' directory and its subdirectories. It will check for errors and code quality issues based on the rules defined in the configuration.

"stylelint 'src/**/*.css'"

Fixing CSS files

This command will not only lint the CSS files but also attempt to fix any fixable issues, such as formatting inconsistencies, automatically.

"stylelint 'src/**/*.css' --fix"

Custom configuration

This JSON represents a custom Stylelint configuration object where specific rules are defined, such as disallowing invalid hex colors, setting indentation preferences, and enforcing no leading zero for numbers.

{ "rules": { "color-no-invalid-hex": true, "indentation": [2, { "except": ["block"] }], "number-leading-zero": "never" } }

Extending configurations

This JSON represents a Stylelint configuration that extends a shared configuration, in this case, 'stylelint-config-standard', which is a popular set of rules that enforce common stylistic conventions.

{ "extends": "stylelint-config-standard" }

Using plugins

This JSON represents a Stylelint configuration that includes a plugin, 'stylelint-scss', which adds SCSS-specific linting rules to Stylelint. The configuration then enables a rule from that plugin to disallow unknown at-rules in SCSS.

{ "plugins": ["stylelint-scss"], "rules": { "scss/at-rule-no-unknown": true } }

Other packages similar to stylelint

eslint

ESLint is a static code analysis tool for identifying problematic patterns in JavaScript code. It is similar to Stylelint in its extensibility and plugin ecosystem but is focused on JavaScript rather than stylesheets.

prettier

Prettier is an opinionated code formatter that supports many languages, including CSS. Unlike Stylelint, which can both lint and fix code, Prettier is solely focused on code formatting and does not provide linting functionalities.

sass-lint

Sass-lint is a node-only Sass linter for both sass and scss syntax. It is similar to Stylelint when working with SCSS files but does not support plain CSS or other CSS-like syntaxes.

csslint

CSSLint is a tool that helps to point out problems with your CSS code. It is less configurable than Stylelint and has a smaller set of rules and plugins, but it serves a similar purpose in linting CSS files.

README

unit-case

Specify lowercase or uppercase for units.

    a { width: 10px; }
/**              ↑
 *     These units */

Options

string: "lower"|"upper"

"lower"

The following patterns are considered warnings:

a {
  width: 10PX;
}

a {
  width: 10Px;
}

a {
  width: 10pX;
}

a {
  width: 10PIXEL;
}

a {
  width: calc(10PX * 2);
}

The following patterns are not considered warnings:

a {
  width: 10px;
}

a {
  width: calc(10px * 2);
}

"upper"

The following patterns are considered warnings:

a {
  width: 10px;
}

a {
  width: 10Px;
}

a {
  width: 10pX;
}

a {
  width: 10pixel;
}

a {
  width: calc(10px * 2);
}

The following patterns are not considered warnings:

a {
  width: 10PX;
}

a {
  width: calc(10PX * 2);
}

Changelog

6.9.0

• Added: defaultSeverity configuration option.
• Added: invoking the CLI with no arguments and no stdin (i.e. just stylelint) is equivalent to stylelint --help.
• Added: function-url-no-scheme-relative rule.
• Added: selector-attribute-quotes rule.
• Fixed: the CLI now uses process.exitCode with stdOut to allow the process to exit naturally and avoid truncating output.
• Fixed: function-calc-no-unspaced-operator correctly interprets negative fractional numbers without leading zeros and those wrapped in parentheses.
• Fixed: no-extra-semicolons now ignores semicolons after Less mixins.
• Fixed: number-max-precision now ignores uppercase and mixed case @import at-rules.
• Fixed: selector-max-specificity no longer crashes on selectors containing :not() pseudo-classes.
• Fixed: time-no-imperceptible correctly handles negative time.